<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>
            <!--表单的搜索框
                 :model="双向绑定表单的数据"
            -->
            <el-form :inline="true" :model="diaryName"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="diaryName.title" placeholder="请输入用户名"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryLog()">查询</el-button>
                    <el-button type="primary" @click="shuaxin()">刷新</el-button>
                </el-form-item>
            </el-form>

            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="operId"
                            label="编号"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="title"
                            label="日志名称"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="operatorType"
                            label="操作方法"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="operUrl"
                            label="操作接口">
                    </el-table-column>
                    <el-table-column
                            prop="operParam"
                            label="参数类型" >
                    </el-table-column>
                    <el-table-column
                            prop="operIp"
                            label="IP地址">
                    </el-table-column>
                    <el-table-column
                            prop="operLocation"
                            label="IP类型">
                    </el-table-column>
                    <el-table-column
                            prop="operName"
                            label="操作人">
                    </el-table-column>
                    <el-table-column
                            prop="operTime"
                            label="记录时间">
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="danger" icon="el-icon-delete" circle @click="firstdelete(scope.row.operId)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <el-dialog
                        title="提示"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <span>是否确认删除</span>
                    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="deleteLogById()">确 定</el-button>
  </span>
                </el-dialog>
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 10, 15, 20]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </template>
        </el-card>
    </div>
</template>

<script>
    export default {
        name: "diary",
        data(){
            return{
                diaryName:{
                    title:"",

                },
                tableData:[],
                currentPage:1,
                pageSize:5,
                total:0,
                LogId:0,
                dialogVisible:false,
            }
        },
        methods:{
            shuaxin(){
                this.$router.push("blank");
            },
            deleteLogById(){
                var that = this;
                var id = that.LogId
                this.$http.get("system/menu/deleteLogById?id="+id).then(r=>{
                    this.$message.success("删除成功")
                    that.dialogVisible=false;
                    this.queryAllLog();

                })
            },
            firstdelete(id){
                var that = this;
                that.LogId=id;
                that.dialogVisible=true;
            },
            queryLog(){
                var that = this;
                this.queryAllLog();
            },
            queryAllLog(){
                var that = this
                this.$http.post(`system/menu/queryAllLog/${this.currentPage}/${this.pageSize}`,this.diaryName).then(r=>{
                    that.tableData=r.data.result.allLog
                    that.total=r.data.result.total;
                })
            },
            handleSizeChange(y){
                this.pageSize=y
                this.queryAllLog();
            },
            //切换页码时触发该方法
            handleCurrentChange(y){
                this.currentPage=y
                this.queryAllLog();
            }
        },
        mounted(){
            this.queryAllLog();

        },
    }
</script>

<style scoped>

</style>
